<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>抱团</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui,viewport-fit=cover"/>
    <meta name="keywords" content="抱团">
    <meta name="description" content="抱团">
    <script type="text/javascript" src="js/base.js" charset="UTF-8"></script>
    <link rel="stylesheet" type="text/css" href="css/theme-chalk/index.css">
    <link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css">
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type='text/javascript' src="js/jquery.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="js/html2canvas.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/layer/layer.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/axios.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="js/elementui.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="js/swiper-bundle.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="js/qrcode.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="js/clipboard.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/helper.js" charset="UTF-8"></script>
</head>
<style>
    html, body, .wrapperbox {
        height: 100%;
        overflow: hidden;
        position: relative;
    }

    .scrollbox {
        height: 100%;
        overflow: scroll;
    }
</style>
<body>
<div class="wrapperbox indexpage searchpage" id="app">
    <div class="scrollbox">
        <div class="searchbox">
            <h2>搜索</h2>
            <div class="search">
                <div class="input">
                    <div class="icon">
                        <i class="icon el-icon-search"></i>
                    </div>
                    <input type="search" placeholder="为您找到最优惠的商品" v-model="searchTxt"
                           @keyup.enter="goSearch(searchTxt)">
                </div>
                <div class="clear" @click="clearSearch">取消</div>
            </div>
        </div>
        <div class="history" v-if="showHistory==true">
            <h3>搜索历史 <span class="icon" @click="openclearsHistory" v-if="searchHistory.length>0"><i
                    class="el-icon-delete"></i></span></h3>
            <div class="listbox">
                <div class="item" v-for="item in searchHistory" v-if="item!=''" @click="goSearch(item)">{{item}}</div>
            </div>
        </div>
        <div class="hotbox" v-if="serachListload==true && serachList.length>0">
            <div class="probox">
                <a :href="'./product.html?id='+item.id" class="product" v-for="(item,i) in serachList">
                    <p class="tit">本商品由{{item.merchant_name}}提供</p>
                    <div class="img">
                        <img :src="item.cover_image_url" alt="">
                        <div class="status wait" v-if="item.ongoing_status=='coming_soon'">
                            <span><i v-if="showTime[i].dd!=0">{{showTime[i].dd}}天</i>{{showTime[i].hh}}小时{{showTime[i].mm}}分钟{{showTime[i].ss}}秒</span>
                            <span>待开抢</span>
                        </div>
                        <div class="status going" v-if="item.ongoing_status=='on_sale'"><span>抢购中</span></div>
                        <div class="status goend" v-if="item.ongoing_status=='offline_soon'">
                            <span><i v-if="showTime[i].dd!=0">{{showTime[i].dd}}天</i>{{showTime[i].hh}}小时{{showTime[i].mm}}分钟{{showTime[i].ss}}秒</span>
                            <span>即将下架</span>
                        </div>
                        <div class="status" v-if="item.ongoing_status=='expired'"><span>已下架</span></div>
                    </div>
                    <div class="text">
                        <h4>{{item.title}}</h4>
                        <p>{{item.intro}}</p>
                    </div>
                    <div class="label">
                        <div class="fl">
                            <h5><em>￥</em>{{item.sale_price}}</h5>
                            <span><em>门市价：¥{{item.original_price}}</em><span>已售：{{item.sales_units}}</span></span>
                        </div>
                        <div class="ab" @click.prevent.stop="openhbpop(i)"
                             v-if="item.min_talent_profit!=item.max_talent_profit"><img src="images/search-ab.png"
                                                                                        alt=""><span>返</span><span
                                class="price"><em>￥</em>{{item.min_talent_profit}}-{{item.max_talent_profit}}</span>
                        </div>
                        <div class="ab" @click.prevent.stop="openhbpop(i)" v-else><img src="images/search-ab.png"
                                                                                       alt=""><span>返</span><span
                                class="price"><em>￥</em>{{item.min_talent_profit}}</span></div>
                    </div>
                    <!--                    <div class="label">-->
                    <!--                        <div class="fl">-->
                    <!--                            <h5><em>￥</em>96.8</h5>-->
                    <!--                            <span><em>门市价：¥160</em><span>已售：120321120321</span></span>-->
                    <!--                        </div>-->
                    <!--                        <div class="ab"><img src="images/search-ab.png" alt=""><span>返</span><span class="price"><em>￥</em>35-45</span></div>-->
                    <!--                    </div>-->
                </a>
            </div>
        </div>
        <div class="emptybox" v-if="serachListload==true && serachList.length==0">
            <div class="empty">
                <div class="img"><img src="images/search-empty.png" alt=""></div>
                <p>暂无搜索结果</p>
            </div>
        </div>
        <p v-if="loading==false" class="loading">加载中...</p>
        <p v-if="has_more==false && serachList.length>10" class="loading">没有更多了</p>
    </div>
    <div class="delhistory pop">
        <div class="shadow"></div>
        <div class="wrap">
            <div class="text">
                <p>是否删除搜索记录</p>
            </div>
            <div class="btnbox">
                <div class="btn" @click="closeclearsHistory">取消</div>
                <div class="btn confirm" @click="clearsHistory">确定</div>
            </div>
        </div>
    </div>
    <div class="pop hbpop">
        <div class="shadow"></div>
        <div class="wrap">
            <div class="wrapcon">
                <div @click="closehbpop" class="close"><img src="images/index-close.png" alt=""></div>
                <div class="popcon">
                    <div class="tit">分享获取 <span>{{hbprofit}}</span> 元收益</div>
                    <div class="imgbox">
                        <div class="img" v-for="(item,i) in hbimgs" v-if="i==0" :data-index="i" @click="openbigimg(i)"
                             :style="{'background-image': 'url('+item+')'}"><span>海报</span></div>
                        <div class="img" v-for="(item,i) in hbimgs" v-if="i>0" :data-index="i" @click="openbigimg(i)"
                             :style="{'background-image': 'url('+item+')'}"></div>
                    </div>
                    <p class="imgtip"><span>点击图片保存</span><img src="images/sj.png" alt=""></p>
                    <div class="text">
                        <p>{{hbtxt}}</p>
                        <div class="btn copy-btn" @click="copy">一键复制文字</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="pop bigimg">
        <div class="shadow"></div>
        <div class="wrap">
            <div class="wrapcon">
                <div @click="closebigimg" class="close"><img src="images/index-close.png" alt=""></div>
                <div class="popcon type1">
                    <div class="hbcon">
                        <img :src="hb" alt="">
                    </div>
                </div>
                <div class="popcon type2">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="(item,i) in hbimgs" v-if="i>0">
                                <img :src="item" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <p class="tip">长按保存图片</p>
            </div>
        </div>
    </div>
    <div class="hbcanvas">
        <img :src="hbimg" alt="">
        <div class="code">
            <div id="qrcodeOne" class="qrcode"></div>
        </div>
    </div>
</div>
</body>
<script>
  var bigimgSwiper = '';
  new Vue({
    el: '#app',
    data() {
      return {
        searchTxt: '',
        searchHistory: [],
        serachList: [],
        serachListload: false,
        showTime: [],
        getTime: null,
        page: 1,
        limit: 10,
        loading: true,
        has_more: true,
        allowclick: true,
        showHistory: true,
        hb: '',
        hbtxt: '',
        hbprofit: '',
        hbimg: '',
        hbimgs: [],
        product_id: '',
        talent_id: '',
        user_info: {},
      }
    },
    mounted() {
      
      var that = this;
      var user_info = JSON.parse(getCookie("user_info"));
      console.log(user_info)
      if (!user_info) {
        that.isLogin = false;
      } else {
        that.isLogin = true;
        that.user_info = user_info;
      }
      that.init();
      that.$nextTick(function () {
        $('.scrollbox').get(0).addEventListener('scroll', function () {
          let ele = $('.scrollbox').get(0); // 获得html
          let scrollTop = ele.scrollTop; // 向上滚动的高度
          let scrollHeight = ele.scrollHeight; // 滚动内容区域总高度
          let clientHeight = ele.clientHeight; // 可见高度
          if (clientHeight + scrollTop >= scrollHeight) { // 已经滚动到底部
            if (that.loading == true && that.has_more == true) {
              that.load()
            }
          }
        })
      })
    },
    methods: {
      init: function () {
        var that = this;
        // console.log(localStorage.getItem("searchHistory"))
        if (localStorage.getItem("searchHistory") != null) {
          that.searchHistory = localStorage.searchHistory.split('&,&');
        }
      },
      getTimeList() {
        var that = this;
        that.getTime = setInterval(function () {
          var arr = [];
          var num = 0;
          for (var i in that.showTime) {
            arr.push(that.showTime[i]);
            if (that.showTime[i].time == 0) {
              num++;
            }
          }
          for (var i in arr) {
            if (arr[i].time > 0) {
              arr[i].time -= 1000;
              var dd = Math.floor(arr[i].time / 1000 / 60 / 60 / 24);
              var hh = Math.floor((arr[i].time / 1000 / 60 / 60) % 24);
              var mm = Math.floor((arr[i].time / 1000 / 60) % 60);
              var ss = Math.floor((arr[i].time / 1000) % 60);
              /*if(0<=dd && dd<10){ dd='0'+dd }else */
              if (dd < 0) {
                dd = 0
              }
              /*if(0<=hh && hh<10){ hh='0'+hh }else */
              if (hh < 0) {
                hh = 0
              }
              /*if(0<=mm && mm<10){ mm='0'+mm }else */
              if (mm < 0) {
                mm = 0
              }
              /*if(0<=ss && ss<10){ ss='0'+ss }else */
              if (ss < 0) {
                ss = 0
              }
              arr[i]["dd"] = dd;
              arr[i]["hh"] = hh;
              arr[i]["mm"] = mm;
              arr[i]["ss"] = ss;
            } else {
              arr[i]["dd"] = 0;
              arr[i]["hh"] = 0;
              arr[i]["mm"] = 0;
              arr[i]["ss"] = 0;
              if (that.serachList[i].ongoing_status == 'coming_soon') {
                that.serachList[i].ongoing_status = 'on_sale'
              }
              if (that.serachList[i].ongoing_status == 'offline_soon') {
                that.serachList[i].ongoing_status = 'expired'
              }
            }
          }
          that.showTime = arr;
        }, 1000);
      },
      goSearch: function (txt) {
        var that = this;
        if (!txt) {
          txt = that.searchTxt;
        }
        txt = String(txt);
        that.searchTxt = txt;
        if (txt.match(/^[ ]*$/)) {
          console.log("搜索内容为空");
        } else {
          sessionStorage.setItem("searchkeyword", txt);
          if (!localStorage.getItem("searchHistory")) {
            localStorage.setItem("searchHistory", txt);
            that.searchHistory.push(txt);
          } else {
            if (localStorage.getItem("searchHistory").indexOf(txt) < 0) {
              localStorage.setItem("searchHistory", localStorage.getItem("searchHistory") + '&,&' + txt);
              that.searchHistory.push(txt);
            }
          }
          that.showHistory = false;
          that.getdata(txt);
        }
      },
      clearSearch: function () {
        var that = this;
        if (that.searchTxt === '') {
          history.back()
          return;
        }
        that.searchTxt = '';
        clearInterval(that.getTime);
        that.page = 1;
        that.showTime = [];
        that.serachList = [];
        that.showHistory = true;
        that.serachListload = false;
      },
      openclearsHistory: function () {
        var that = this;
        $('.pop.delhistory').fadeIn(500);

      },
      closeclearsHistory: function () {
        var that = this;
        $('.pop.delhistory').fadeOut(500);

      },
      clearsHistory: function () {
        var that = this;
        localStorage.removeItem("searchHistory");
        that.searchHistory = [];
        $('.pop.delhistory').fadeOut(500);
      },
      getdata: function (txt) {
        var that = this;
        clearInterval(that.getTime);
        that.page = 1;
        talent_get('products?keyword=' + txt + '&page=' + that.page + '&limit=' + that.limit).then(res => {
          that.has_more = res.has_more;
          that.showTime = [];
          that.serachList = [];
          if (res.list.length > 0) {
            $(res.list).each((i, v) => {
              var time = 0;
              if (v.ongoing_status == 'coming_soon') {
                v.start_time = v.start_time.replace(/-/g, '/');
                time = new Date(v.start_time).getTime() - new Date().getTime();
              } else if (v.ongoing_status == 'offline_soon') {
                v.end_time = v.end_time.replace(/-/g, '/');
                time = new Date(v.end_time).getTime() - new Date().getTime();
              }
              var dd = 0, hh = 0, mm = 0, ss = 0;
              if (time > 0) {
                dd = Math.floor(time / 1000 / 60 / 60 / 24);
                hh = Math.floor((time / 1000 / 60 / 60) % 24);
                mm = Math.floor((time / 1000 / 60) % 60);
                ss = Math.floor((time / 1000) % 60);
                /*if(0<=dd && dd<10){ dd='0'+dd }else */
                if (dd < 0) {
                  dd = 0
                }
                /*if(0<=hh && hh<10){ hh='0'+hh }else */
                if (hh < 0) {
                  hh = 0
                }
                /*if(0<=mm && mm<10){ mm='0'+mm }else */
                if (mm < 0) {
                  mm = 0
                }
                /*if(0<=ss && ss<10){ ss='0'+ss }else */
                if (ss < 0) {
                  ss = 0
                }
              }
              that.showTime.push({'time': time, 'dd': dd, 'hh': hh, 'mm': mm, 'ss': ss});
              that.serachList.push(v);
            })
            that.getTimeList();
            if (bigimgSwiper == '') {
              that.$nextTick(function () {
                bigimgSwiper = new Swiper('.bigimg.pop .swiper-container', {
                  observer: true,
                  observeParents: true,
                  observeSlideChildren: true,
                  watchOverflow: true,
                  spaceBetween: 15,
                })
              })
            }
          }
          that.serachListload = true;
        })
      },
      load() {
        var that = this;
        that.loading = false;
        that.page++;
        var txt = sessionStorage.getItem("searchkeyword");
        talent_get('products?keyword=' + txt + '&page=' + that.page + '&limit=' + that.limit).then(res => {
          that.has_more = res.has_more;
          if (res.list.length > 0) {
            $(res.list).each((i, v) => {
              var time = 0;
              if (v.ongoing_status == 'coming_soon') {
                v.start_time = v.start_time.replace(/-/g, '/');
                time = new Date(v.start_time).getTime() - new Date().getTime();
              } else if (v.ongoing_status == 'offline_soon') {
                v.end_time = v.end_time.replace(/-/g, '/');
                time = new Date(v.end_time).getTime() - new Date().getTime();
              }
              var dd = 0, hh = 0, mm = 0, ss = 0;
              if (time > 0) {
                dd = Math.floor(time / 1000 / 60 / 60 / 24);
                hh = Math.floor((time / 1000 / 60 / 60) % 24);
                mm = Math.floor((time / 1000 / 60) % 60);
                ss = Math.floor((time / 1000) % 60);
                /*if(0<=dd && dd<10){ dd='0'+dd }else */
                if (dd < 0) {
                  dd = 0
                }
                /*if(0<=hh && hh<10){ hh='0'+hh }else */
                if (hh < 0) {
                  hh = 0
                }
                /*if(0<=mm && mm<10){ mm='0'+mm }else */
                if (mm < 0) {
                  mm = 0
                }
                /*if(0<=ss && ss<10){ ss='0'+ss }else */
                if (ss < 0) {
                  ss = 0
                }
              }
              that.showTime.push({'time': time, 'dd': dd, 'hh': hh, 'mm': mm, 'ss': ss});
              that.serachList.push(v);
            })
          }
          that.loading = true;
        })
      },
      openhbpop: function (index) {
        let item = this.serachList[index]
        this.hbtxt = '【' + item.title + '】' + item.intro;
        this.hbprofit = item.min_talent_profit;
        if (item.min_talent_profit !== item.max_talent_profit) {
          this.hbprofit += ' - ' + item.max_talent_profit;
        }
        this.hbimg = item.poster_image_url;
        this.hbimgs = [item.poster_image_url].concat(item.images);
        this.product_id = item.id;
        this.makecodeOne();
        $('.hbpop.pop').fadeIn(500);
      },
      closehbpop: function (type) {
        var that = this;
        $('.hbpop.pop').fadeOut(500);
      },
      copy: function () {
        var that = this;
        var clipboard = new ClipboardJS('.copy-btn', {
          text: function () {
            return that.hbtxt;
          },
        });
        clipboard.on('success', function (e) {
          console.log(e);
          layer.msg('复制成功');
          clipboard.destroy()
        });
        clipboard.on('error', function (e) {
          console.log(e);
          layer.msg('复制失败');
          clipboard.destroy()
        });
      },
      openbigimg: function (index) {
        var that = this;
        if (index == 0) {
          var canvas2 = document.createElement("canvas");
          var _canvas = $('.hbcanvas').get(0);
          var w = parseInt(window.getComputedStyle(_canvas).width);
          var h = parseInt(window.getComputedStyle(_canvas).height);
          canvas2.width = w;
          canvas2.height = h;
          canvas2.style.width = w + "px";
          canvas2.style.height = h + "px";
          var context = canvas2.getContext("2d");
          var img=new Image();
          img.src=that.hbimg;
          var index = layer.load(1, {shade: [0.6, '#000']});
          img.onload=function(){
            console.log('loaded');
            html2canvas(_canvas, {
              scrollY: 0,
              scrollX: 0,
              useCORS: true,
              canvas: canvas2,
              backgroundColor: null,
              scale: 3
            }).then(function (canvas) {
              layer.close(index);
              that.hb = canvas.toDataURL('image/png');
              setTimeout(() => {
                $('.pop.bigimg .wrap .wrapcon').addClass('type1');
                $('.bigimg.pop .type1').fadeIn(0);
                $('.bigimg.pop').fadeIn(500);
              },100)
            });
          }
          
        } else {
          var initindex = index - 1;
          bigimgSwiper.update();
          $('.bigimg.pop .type2').fadeIn(0);
          bigimgSwiper.slideTo(initindex, 0, false);
          $('.bigimg.pop').fadeIn(500);
        }
        
      },
      closebigimg: function (type) {
        var that = this;
        $('.bigimg.pop').fadeOut(500);
        setTimeout(() => {
          $('.bigimg.pop .popcon').fadeOut(0);
          $('.pop.bigimg .wrap .wrapcon').removeClass('type1');
        }, 500)
      },
      makecodeOne: function () {
        var that = this;
        var qrcodetxt = 'https://prod.baotuan.vip/product/' + that.product_id + '/by/' + that.user_info.talent_id;
        console.log(qrcodetxt)
        qrcode = new QRCode($('#qrcodeOne').get(0), {
          text: qrcodetxt,
          width: 128,
          height: 128,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
      },
    }
  });
</script>
</html>